<template>
    <div class="calendar-bottom">
        <div class="left">
            <h2>{{ result.lunar }}</h2>
            <h3>{{ result.lunarYear }} {{ result.animalsYear }}</h3>
        </div>
        <div class="right">
            <div>忌: {{ result.avoid }}</div>
            <div>宜: {{ result.suit }}</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useCalendarStore } from '@/stores/calendar';

const {formatDate} = storeToRefs(useCalendarStore())
const result = ref({
    lunar: '',
    lunarYear: '',
    animalsYear: '',
    avoid: '',
    suit: ''
})
const key ='148164d8910ee379724f95fbfff60ed5'


onMounted(async () => {
    const res= await fetch(`/calendar/day?key=${key}&date=${formatDate.value}`).then(res => res.json())
    if (res.error_code === 0){
        result.value = res.result.data
    }
})
</script>

<style lang="scss" scoped>
.calendar-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 20px 20px;
    padding: 20px;
    background-color: #f4f5f8;
    border-radius: 16px;
    .left {
        flex: 1;
    }
   .right {
        flex:3;
   }
}
</style>